<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="loginBox">
        <div class="main">
            <div v-if="type===2">
                <div class="inpBox">
                    <input type="text" placeholder="手机号码" v-model="account">
                </div>
                <div class="inpBox">
                    <input type="text" placeholder="手机验证码" v-model="password">
                    <a href="javascript:;" @click="sendCode ">{{isRun?`${runTime}s后重新发送` : `获取验证码`}}</a>
                </div>
            </div>

            <div v-if="type===1">
                <div class="inpBox">
                    <input type="text" placeholder="用户名/手机号" v-model="account">
                </div>
                <div class="inpBox">
                    <input type="password" placeholder="密码" v-model="password">
                </div>
            </div>
            <button @click="loginHandle">立即登录</button>
            <span @click="changeType">{{type===1?'短信验证码登录':'用户名密码登录'}}</span>
        </div>
    </div>
</body>
<script>
    export default {
        data(){
            return {
                type:2,
                account:"",
                password:"",
                //倒计时
                isRun:false,
                runTime:30
            }
        },
        methods:{
            changeType(){
                this.type=this.type===2?1:2
                this.account="",
                this.password=" "
            },
            async sendCode(){

                //校验
                if(this.isRun) return;
                // 1.校验手机格式是否正确,为了防止不必要的服务器请求，防止xss攻击（输入恶意的js或sql脚本）
                if(!/^1\d{10}$/.test(this.account)){
                    alert("手机号码格式不正确")
                    return;
                }
                //2.验证手机号是否被注册-》向后台发送
               let data=await api.personal.phone(this.account);
               if(parseInt(data.code)!==0){
                   alert("手机号码没有被注册，请先注册")
                   return;//不让程序继续向下执行
               }
               //3.通知服务器发送验证码
               data=await api.personal.code(this.account);
               if(parseInt(data.code)===1){
                   alert("当前网络繁忙，请稍后重试~~~")
                   return;
               }
               //开启倒计时
                this.isRun=true
                this.autoTimer=setInterval(()=>{
                    if(this.runTime ===0){
                        this.runTime=30;
                        this.isRun=false;
                        clearInterval(this.autoTimer)
                        return;
                    }
                    this.runTime--
                },1000)
            },
            async loginHandle(){
                //分情况
                //表单校验
                //校验验证码的正确性
               let data=await api.personal.checkCode(this.account,this.password);
               if(parseInt(data.code) !==0){
                    alert("验证码不正确");
                    return;
               }
               //登录
               data=await api.personal.login(this.account,this.password,this.type);
               if(parseInt(data.code) !==0){
                   alert("登录失败")
                   return;
               }
               alert("登录成功");
               this.$router.push("/firstPage")

            },
        }
    }
</script>
</html>